<script setup>
import { computed, ref, reactive, watch, onMounted } from 'vue'
import useInfoStore from '@/store/user.js'
import { storeToRefs } from 'pinia'
import AuditDialog from '../../dialog/AuditDialog.vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// const { proxy } = getCurrentInstance()

const infoStore = useInfoStore()
const { detailInfo, baseInfo } = storeToRefs(infoStore)


let iframeRef = ref(null)
onMounted(() => {
  watch(() => baseInfo.value.id, () => {   
    setTimeout(() => {
      console.dir(iframeRef.value);
      iframeRef.value.contentWindow.location.replace(baseInfo.value.ldy)
    })
  })
})



// table数据
let tableData = detailInfo

let tableLen = computed(() => {
  return tableData.value.length
})

// 内嵌iframe页面的高度
let iframeHeight = computed(() => {
  return tableData.value.length * 80
})



const objectSpanMethod = ({
  rowIndex,
  columnIndex,
}) => {
  if (columnIndex === 5) {
    if (rowIndex === 0) {
      return {
        // 数据总记录
        rowspan: tableLen.value,
        colspan: 1,
      }
    } else {
      return { rowspan: 0, colSpan: 0 }
    }

  } else if (columnIndex === 6) {
    if (rowIndex === 0) {
      return {
        // 数据总记录
        rowspan: tableLen.value,
        colspan: 1,
      }
    } else {
      return { rowspan: 0, colSpan: 0 }
    }
  }
}

const headerStyle = ({ row, columnIndex }) => {
  row[5].colSpan = 2 //第二个表头占两格
  row[6].colSpan = 0 //第一个表头占零格
  if (columnIndex === 6) { //隐藏第一个表头
    return { display: "none" }
  }
}

// 弹窗
let dialogShow = ref(false)
let dialogContent = reactive({
  userId: infoStore.baseInfo.id,
  option: '',
  rowId: []
})
let close = () => {
  dialogShow.value = false
}

const selectionChange = (rows) => {
  dialogContent.rowId = []
  for (let i = 0; i < rows.length; i++) {
    dialogContent.rowId.push(rows[i].id)
  }
}


const passOrReject = (op) => {
  dialogContent.userId = infoStore.baseInfo.id
  if (dialogContent.rowId.length === 0 && op != '搁置' && op != '拒绝账户') {
    dialogContent.option = '操作失败，选择内容为空'
    dialogShow.value = true
  } else {
    dialogContent.option = op
    dialogShow.value = true
  }

}

// 通过
const pass = (index, flag) => {
  dialogContent.userId = infoStore.baseInfo.id
  dialogContent.option = '通过'
  dialogContent.rowId = index
  if (flag) dialogContent.rowId = 'ldy'
  dialogShow.value = true
}
// 拒绝
const refuse = (index, flag) => {
  dialogContent.userId = infoStore.baseInfo.id
  dialogContent.option = '拒绝'
  dialogContent.rowId = index
  if (flag) dialogContent.rowId = 'ldy'
  dialogShow.value = true
}

const goToNext = () => {
  let x = Math.floor(Math.random() * 3 + 1)
  let username = "李阳"
  let id = route.query.id * 1 + 1
  switch (x) {
    case 1:
      username = '张三'
      break
    case 2:
      username = '李阳阳'
      break
    case 3:
      username = '王五'
      break;

  }
  infoStore.getUserInfo(id)
  router.replace({ path: '/audit', query: { id, username } })
  // // 刷新页面
  // router.go(0)
}
</script>

<template>
  <div>
    <div class="buttons">
      <div>
        <button @click="passOrReject('通过所选')">通过所选</button>
      </div>
      <div>
        <button @click="passOrReject('拒绝所选')">拒绝所选</button>
      </div>
      <div>
        <button @click="passOrReject('拒绝账户')">拒绝账户</button>
      </div>
      <div>
        <button @click="passOrReject('搁置')">搁置</button>
      </div>
      <div>
        <button @click="goToNext">下一个任务</button>
      </div>
    </div>
    <el-table :scrollbar-always-on="false" @selection-change="selectionChange" :header-cell-style="headerStyle"
      :span-method="objectSpanMethod" ref="multipleTableRef" border :data="tableData"
      style=" width: 100%;font-size: 15px;height: 60vh;">
      <el-table-column align="center" type="selection" width="45" />
      <el-table-column align="center" property="title" label="标题" width="100" />
      <el-table-column align="center" property="desc" label="描述" width="200" />
      <el-table-column align="center" width="200" label="图片" show-overflow-tooltip>
        <template #default="scope">
          <div key="1111">
            <img :src="scope.row.imgList[0]" alt="">
            &nbsp;
            <img :src="scope.row.imgList[1]" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="100">
        <template #default="scope">
          <div key="2222">
            <el-button link type="primary" style="font-size: 15px;" @click.prevent="pass(scope.$index)">
              通过
            </el-button>
            <el-button link type="primary" style="font-size: 15px;" @click.prevent="refuse(scope.$index)">
              拒绝
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column style="overflow: hidden;" align="center" label="落地页">
        <template #default="scope">
          <div :key="scope.row.id" style="position: absolute; top: 0;overflow: hidden;">
            <div>{{ scope.row.ldy }}</div>
            <iframe ref="iframeRef"
              :style="{ width: '100%', height: iframeHeight + 'px', overflow: 'hidden', 'max-height': '500px' }"
              frameborder="0"></iframe>
          </div>
        </template>
      </el-table-column>
      <el-table-column key="999" align="center" label="操作" width="50">
        <template #default="scope">
          <div key="3333">
            <el-button link type="primary" style="font-size: 15px;" @click.prevent="pass(scope.$index, 'flag')">
              通过
            </el-button>
            <el-button link type="primary" style="font-size: 15px;" @click.prevent="refuse(scope.$index, 'flag')">
              拒绝
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <AuditDialog @close="close" title="模拟请求内容" :isShow="dialogShow">
      <ul style="font-size: 20px;">
        <li>
          请求操作: {{ dialogContent.option }}
        </li>
        <li>
          请求用户id: {{ dialogContent.userId }}
        </li>
        <li>
          请求的具体内容id: {{ dialogContent.rowId }}
        </li>
      </ul>
    </AuditDialog>
  </div>
</template>

<style lang="less" scoped>
// 70vh
.buttons {
  width: 100%;
  height: 7vh;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 10px;

  button {
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
  }
}

.el-table {
  font-size: 15px;

  &:deep(.el-button+.el-button) {
    margin-left: 0;
  }
}</style>